<template>
  <div id="page-wrapper" class="gray-bg">
    <header-link/>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>用户信息</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              <a>主页</a>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'userDetail' }">
              <a>用户信息</a>
            </router-link>
          </li>
          <li class="active">
            <strong>用户编辑</strong>
          </li>
        </ol>
      </div>
    </div>

        <div class="wrapper container wrapper-content animated fadeInUp">
          <div class="ibox">
            <div class="ibox-title">
              <h5></h5>
              <div class="ibox-tools">
                <router-link :to="{ name: 'userDetail'}" class="btn btn-primary btn-xs">
                  <small><i class="fa fa-undo"></i></small> 返回
                </router-link>
              </div>
            </div>
              <div class="ibox-content">
                <form method="get" class="form-horizontal">
                  <!-- <div class="form-group has-error"> -->
                  <div class="form-group" v-bind:class="{ 'has-error': usernameExistFlag }">
                    <label class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" v-model='userDetail.username' v-on:change="checkUserNameExist">
                    </div>
                    <p v-if='usernameExistFlag' class="col-sm-3 control-label text-align-left">
                      用户名已经存在
                    </p>
                  </div>
                  <div class="form-group" v-bind:class="{ 'has-error': emailExistFlag }">
                    <label class="col-sm-3 control-label">邮箱</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" v-model='userDetail.email' v-on:change="checkEmailExist">
                    </div>
                    <p v-if='emailExistFlag' class="col-sm-3 control-label text-align-left">
                      邮箱已经存在
                    </p>
                  </div>
                  <div class="form-group" v-bind:class="{ 'has-error': phoneExistFlag }">
                    <label class="col-sm-3 control-label">电话号码</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" v-model='userDetail.phone' v-on:change="checkPhoneExist">
                    </div>
                    <p v-if='phoneExistFlag' class="col-sm-3 control-label text-align-left">
                      电话号码已经存在
                    </p>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-3">
                      <p class="form-control-static">
                        <router-link :to="{ name: 'changePassword'}" class="btn btn-primary btn-xs">
                          <i class="fa fa-edit"></i> 修改密码
                        </router-link>
                      </p>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">问题</label>
                    <div class="col-sm-3">
                      <select class="form-control" v-model="question" v-on:change="changeQuestion">
                        <option v-for="(item, index) in questionList" :value="item.id">{{item.question}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">答案</label>
                    <div class="col-sm-3">
                      <p v-if="!changeAnswerFlag" class="form-control-static">
                        ***********
                        <a class="btn btn-primary btn-xs" v-on:click="changeAnswer">
                          <i class="fa fa-edit"></i> 修改答案
                        </a>
                      </p>
                      <div v-else class="input-group">
                        <input type="text" class="form-control" v-model="answer">
                        <span class="input-group-btn">
                          <a v-on:click="changeAnswer" class="btn btn-primary">
                            <small><i class="fa fa-undo"></i></small>
                          </a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="hr-line-dashed"></div>
                  <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-3">
                      <a class="btn btn-primary" v-on:click="submit">
                        <i class="fa fa-save"></i> 保存</a>
                    </div>
                  </div>
                </form>
              </div>
          </div>
        </div>

  </div>

</template>

<script>
import header from '@/components/Header.vue'
import server from '@/server/server.js'
export default {
  name: 'userEdit',
  data () {
    return {
      usernameExistFlag: false,
      emailExistFlag: false,
      phoneExistFlag: false,
      changeQuestionFlag: false,
      changeAnswerFlag: false,
      userDetail: {},
      question: '',
      answer: '',
      questionList: []
    }
  },
  components: {
    'header-link': header
  },
  created () {
    const vue = this
    // 获取用户信息
    server.get(server.getUserInfoUrl, null, '', true, false, this, function(data) {
      vue.userDetail = data
      vue.question = vue.userDetail.question
      vue.userName = vue.userDetail.username
      vue.email = vue.userDetail.email
      vue.phone = vue.userDetail.phone

    })
    // 获取问题列表
    server.get(server.getQuestionListUrl, null, "", true, false, this, function(data) {
      vue.questionList = data
    })
  },
  mounted () {
  },
  methods: {
    changeQuestion: function() {
      const vue = this
      if (vue.question == vue.userDetail.question) {
        vue.changeQuestionFlag = false
        vue.changeAnswerFlag = false
      } else {
        vue.changeQuestionFlag = true
        vue.changeAnswerFlag = true
      }
    },
    changeAnswer: function() {
      const vue = this
      // 问题已经改变得场合
      // 问题恢复
      if (vue.changeQuestionFlag) {
          vue.changeQuestionFlag = false
          // 问题恢复
          vue.question = vue.userDetail.question
      }
      if (vue.changeAnswerFlag) {
        vue.changeAnswerFlag = false
      } else {
        vue.changeAnswerFlag = true
      }
    },
    checkUserNameExist: function() {
      const vue = this
      if (vue.userName != vue.userDetail.username) {
        // 用户名更改的场合
        // 检查用户名是否存在
        const param = "userName=" + vue.userDetail.username
        server.get(server.getCheckUserNameExistUrl, null, param, true, false, this, function(data) {
          if (data) {
            vue.usernameExistFlag = true
          } else {
            vue.usernameExistFlag = false
          }
        })
      } else {
        vue.usernameExistFlag = false
      }
    },
    checkEmailExist: function() {
      const vue = this
      if (vue.email != vue.userDetail.email) {
        // 用户名更改的场合
        // 检查用户名是否存在
        const param = "email=" + vue.userDetail.email
        server.get(server.getCheckEmailExistUrl, null, param, true, false, this, function(data) {
          if (data) {
            vue.emailExistFlag = true
          } else {
            vue.emailExistFlag = false
          }
        })
      } else {
        vue.emailExistFlag = false
      }
    },
    checkPhoneExist: function() {
      const vue = this
      if (vue.phone != vue.userDetail.phone) {
        // 用户名更改的场合
        // 检查用户名是否存在
        const param = "phone=" + vue.userDetail.phone
        server.get(server.getCheckPhoneExistUrl, null, param, true, false, this, function(data) {
          if (data) {
            vue.phoneExistFlag = true
          } else {
            vue.phoneExistFlag = false
          }
        })
      } else {
        vue.phoneExistFlag = false
      }
    },
    submit: function() {
      const vue = this
      const params = {
        id: vue.userDetail.id,
        username: vue.userDetail.username,
        email: vue.userDetail.email,
        phone: vue.userDetail.phone
      }
        // console.log('vue.changeQuestionFlag', vue.changeQuestionFlag)
      if (vue.changeQuestionFlag) {
        params.question = vue.question
      } else {
        // console.log('vue.userDetail.question', vue.userDetail.question)
        params.question = vue.userDetail.question + ''
      }
      if (vue.changeAnswerFlag) {
        params.answer = vue.answer
      } else {
        params.answer = vue.userDetail.answer
      }

      server.post(server.postUpdateUserInfoUrl, null, params, true, false, this, function(data) {
          vue.$toastr('success', '用户信息修改成功', '成功')
          setTimeout(function() {
            // 跳转用户信息页面
            vue.$router.push({ name: 'userDetail'})
          }, 1500);
      })


    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.control-label.text-align-left {
  text-align: left;
}
#page-wrapper {
  margin: 0;
}

</style>
